import { Component } from '@angular/core';
import { environment } from 'src/environments/environment';
import { AngularEditorConfig } from '@kolkov/angular-editor';

@Component({
  selector: 'app-richeditor',
  templateUrl: './richeditor.component.html',
  styles: [``]
})
export class RicheditorComponent {
  //编辑器中的内容
  public content: string = '';
  //图片项目的访问地址(pic.test.com):全局设置
  //public imgBucketDomain:string = 'http://pic.test.com';
  //图片项目的上传入口(/upload/ckeditor):全局设置
  //public imgBucketUploadUri:string = '/upload/angular';

  constructor() { }
  /**
   * 若图片服务器(pic.test.com)开启了CORS过滤器(org.apache.catalina.filters.CorsFilter)并且cors.allowed.origins限制了域名,cors.support.credentials=true
   * config:AngularEditorConfig.uploadWithCredentials=true
   * 
   * 本地测试时需要将图片服务器:cors.allowed.origins=*,cors.support.credentials=false不然上传会失败
   * 
   */
  //npm install @kolkov/angular-editor --save @see://github.com/kolkov/angular-editor
  public config: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    sanitize: false,
    height: 'auto',
    minHeight: '15rem',
    maxHeight: '45rem',
    placeholder: '在此输入内容...',
    translate: 'no',
    defaultParagraphSeparator: 'p',
    defaultFontName: 'Arial',
    uploadUrl: environment.imgBucketDomain + environment.imgBucketUploadUri,
    uploadWithCredentials: environment.imgBucketUploadCredentials,
    toolbarHiddenButtons: [
      ['undo', 'redo', 'strikeThrough', 'subscript', 'superscript', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent', 'insertUnorderedList', 'insertOrderedList', 'heading'],
      ['backgroundColor', 'customClasses', 'insertVideo', 'insertHorizontalRule', 'removeFormat', 'toggleEditorMode']
    ]
  };

  public getContent(): string {
    return this.content;
  }
  /*
  config: AngularEditorConfig = {
      editable: true,
        spellcheck: true,
        height: 'auto',
        minHeight: '0',
        maxHeight: 'auto',
        width: 'auto',
        minWidth: '0',
        translate: 'yes',
        enableToolbar: true,
        showToolbar: true,
        placeholder: 'Enter text here...',
        defaultParagraphSeparator: '',
        defaultFontName: '',
        defaultFontSize: '',
        fonts: [
          {class: 'arial', name: 'Arial'},
          {class: 'times-new-roman', name: 'Times New Roman'},
          {class: 'calibri', name: 'Calibri'},
          {class: 'comic-sans-ms', name: 'Comic Sans MS'}
        ],
        customClasses: [
        {
          name: 'quote',
          class: 'quote',
        },
        {
          name: 'redText',
          class: 'redText'
        },
        {
          name: 'titleText',
          class: 'titleText',
          tag: 'h1',
        },
      ],
      uploadUrl: 'v1/image',
      upload: (file: File) => { ... }
      uploadWithCredentials: false,
      sanitize: true,
      toolbarPosition: 'top',
      toolbarHiddenButtons: [
        ['bold', 'italic'],
        ['fontSize']
      ]
  };
  
  toolbarHiddenButtons: [
    [
      'undo',
      'redo',
      'bold',
      'italic',
      'underline',
      'strikeThrough',
      'subscript',
      'superscript',
      'justifyLeft',
      'justifyCenter',
      'justifyRight',
      'justifyFull',
      'indent',
      'outdent',
      'insertUnorderedList',
      'insertOrderedList',
      'heading',
      'fontName'
    ],
    [
      'fontSize',
      'textColor',
      'backgroundColor',
      'customClasses',
      'link',
      'unlink',
      'insertImage',
      'insertVideo',
      'insertHorizontalRule',
      'removeFormat',
      'toggleEditorMode'
    ]
  ]
  <textarea id="content" name="content" class="richeditor" required="required" tabindex="1" placeholder="回复内容在此输入" [(ngModel)]="posts.content" [ngModelOptions]="{standalone: true}"></textarea>
  <textarea class="richeditor" required="required" tabindex="3" placeholder="话题内容在此输入" [(ngModel)]="topic.content" [ngModelOptions]="{standalone: true}"></textarea>
  */
}
